<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入jQuery库 -->
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>

    <!-- 引入Bootstrap库 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- 引入bootstrap-table库 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.css">
    <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>

    <!-- 引入bootstrap-table-tree插件 -->
    <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/extensions/tree/bootstrap-table-tree.min.js"></script>

</head>

<body>

<table id="table"></table>

<script>
    var data = [
        {
            id: 1,
            name: 'Parent 1',
            children: [
                {
                    id: 2,
                    name: 'Child 1-1',
                    children: [
                        {
                            id: 3,
                            name: 'Grandchild 1-1-1'
                        },
                        {
                            id: 4,
                            name: 'Grandchild 1-1-2'
                        }
                    ]
                },
                {
                    id: 5,
                    name: 'Child 1-2'
                }
            ]
        },
        {
            id: 6,
            name: 'Parent 2',
            children: [
                {
                    id: 7,
                    name: 'Child 2-1'
                },
                {
                    id: 8,
                    name: 'Child 2-2'
                }
            ]
        }
    ];

    $('#table').bootstrapTable({
        data: data,
        columns: [
            {
                field: 'name',
                title: 'Name'
            }
        ],
        // 配置 bootstrap-table-tree 插件
        treeShowField: 'name',
        parentIdField: 'parentId',
        onResetView: function(data) {
            // 初始化折叠状态
            $('#table').treegrid({
                initialState: 'collapsed',
                treeColumn: 1,
                expanderExpandedClass: 'glyphicon glyphicon-minus',
                expanderCollapsedClass: 'glyphicon glyphicon-plus',
                onChange: function() {
                    $('#table').bootstrapTable('resetWidth');
                }
            });
        }
    });


</script>


</body>
</html>